Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / map / internal / MapBearingInstructions.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD -->

Tff7b72<templateTff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"absolute top-[calc(0.5rem+2.75rem+0.5rem+2.75rem)] left-1/2 -translate-x-1/2 z-[19] w-[min(100vw-2rem,24rem)] pointer-events-auto"

Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"bg-white/95 dark:bg-zinc-900/95 backdrop-blur border border-gray-200 dark:border-zinc-700 rounded-xl shadow-lg px-3 py-2 text-xs text-gray-800 dark:text-zinc-200"

Tff7b72>

Tff7b72<p Te6edf3class=Ta5d6ff"font-medium text-center" Te6edf3:class=Ta5d6ff"showFromHere ? 'mb-2' : ''"Tff7b72>Tff7b72{{ Te6edf3instructionText Tff7b72}}Tff7b72</p>

Tff7b72<button

Te6edf3v-if=Ta5d6ff"showFromHere"

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"w-full py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white text-[11px] font-semibold transition-colors"

@Te6edf3click=Ta5d6ff"$emit('use-my-location')"

Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"map.bearing_from_here"Tff7b72) Tff7b72}}

Tff7b72</button>

Tff7b72</div>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

export default {

name: "MapBearingInstructions",

props: {

fromGpsActive: { type: Boolean, default: false },

awaitingSecondTap: { type: Boolean, default: false },

},

emits: ["use-my-location"],

computed: {

instructionText() {

if (this.fromGpsActive) {

return this.$t("map.bearing_hint_destination");

}

if (this.awaitingSecondTap) {

return this.$t("map.bearing_hint_second");

}

return this.$t("map.bearing_hint_first");

},

showFromHere() {

return !this.fromGpsActive;

},

},

};

Tff7b72</script>